<template>
  <view class="pay-success flex-row flex-center" :class="{ show: modelValue }">
    <view class="flex-column flex-center container" :class="{ show: modelValue }">
      <view class="content relative flex-column align-center justify-between">
        <image src="/static/no-balance.png" class="no-balance block" />

        <view class="flex-column flex-center">
          <text class="text-34 title">到账星币</text>
          <text class="text-28 color-t2">为支持创作者，请充值解锁后继续观看</text>
        </view>

        <by-button
            width="356rpx"
            height="78rpx"
            font-size="32rpx"
            :font-color="colors.colorWhite"
            background="linear-gradient( 178deg, #EBAD64 0%, #FF306E 64%);"
            text="立即充值"
            @click="topUp"
        />
      </view>

      <image src="/static/close.png" class="close block margin-top-30" @click="$emit('update:modelValue', false)" />
    </view>
  </view>
</template>

<script setup lang="ts">
import colors from '@/style/style.module.scss'

interface IProps{
  modelValue: boolean
}

const $emit = defineEmits(['update:modelValue', 'topUp'])

withDefaults(defineProps<IProps>(), {
  modelValue: false
})

function topUp() {
  $emit('update:modelValue', false)
  $emit('topUp')
}
</script>

<style scoped lang="scss">
.pay-success{
  @include position(fixed, 0, 0, 0, 0, 999);
  background: rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease-in-out;

  &.show{
    opacity: 1;
    visibility: visible;
  }

  .container{
    transform: scale(.7);
    transition: all .3s ease-in-out;

    &.show{
      transform: scale(1);
    }

  }

  .content{
    width: 569rpx;
    height: 494rpx;
    background: linear-gradient( 180deg, #FFFEDF 0%, #FDFEFF 45%, #F5DDF9 100%);
    border-radius: 32rpx;
    padding-top: 20rpx;
    padding-bottom: 56rpx;

    .no-balance{
      width: 174rpx;
      height: 174rpx;
    }

    .title{
      line-height: 46rpx;
      color: #262626;
      margin-bottom: 12rpx;
    }

    .purse-icon{
      width: 90rpx;
      height: 90rpx;
    }

    .more{
      color: #595959;
    }

  }

  .decorate{
    width: 570rpx;
    height: 574rpx;
    background: rgba(255,255,255,0.2);
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    border: 1rpx solid rgba(255, 255, 255, 0.66);
    @include position(absolute, 0, 0, $z-index: 1);
    transform: rotate(5.4deg);
  }

  .close{
    width: 64rpx;
    height: 64rpx;
  }

}
</style>
